<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>14-绘制三角扇</title>
		<style type="text/css">
			body {
				margin: 0;
				overflow: hidden;
			}
			#canvas {
				background-color: antiquewhite;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<!-- glsl es 语言 -->
		<!-- 顶点着色器 -->
		<script id="vertexShader" type="x-shader/x-vertex">
			attribute vec4 a_Position;
			void main() {
				// 点位 x y z 一个顶点到相机的距离
				gl_Position = a_Position;
				// 因为是控制顶点大小的已经不需要了
				// gl_PointSize = 50.0;
			}
		</script>
		<!-- 片元着色器 -->
		<script id="fragmentShader" type="x-shader/x-fragment">
			void main() {
				gl_FragColor = vec4(1,1,0,1);
			}
		</script>
		<script type="module">
			import { initShaders } from "./js/utils.js"
			const canvas = document.querySelector("#canvas");
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
			
			const vsSource = document.querySelector("#vertexShader").innerText;
			const fsSource = document.querySelector("#fragmentShader").innerText;
			
			const gl = canvas.getContext("webgl");
			gl.clearColor(0, 0, 0, 1);
			gl.clear(gl.COLOR_BUFFER_BIT);
			
			// 初始化着色器
			// 功能：解析着色器文本，整合到程序对象里,关联webgl上下文对象，实现两种语言的
			initShaders(gl, vsSource, fsSource);
			// 如何像attribute变量中写入多点，绘制多点
			// 顶点数据
			const vertices = new Float32Array([
				0, 0.1,
				-0.1, -0.1,
				0.1, -0.1,
				0.4, 0.3,
				0.6, -0.1
			]);
			// 缓冲对象
			const vertexBuffer = gl.createBuffer();
			// 绑定缓冲对象
			gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
			// 写入数据
			gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
			// 获取 attribute 变量
			const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
			// 修改 attribute 变量
			gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
			// 赋能批处理
			gl.enableVertexAttribArray(a_Position);
			// 三角形
			// 以上一个三角形的第三条边+下一个点为基础，按照和第三条边相反的顺序，绘制三角形
			gl.drawArrays(gl.TRIANGLE_FAN, 0, 5);

		</script>
	</body>
</html>